<%@ page contentType="text/html;charset=utf-8"  language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<jsp:include page="../header.jsp" />

<jsp:include page="../navbar.jsp" />

<div class="container-fluid container-margin-top">

	<div class="row">
		<div class="col-lg-2 col-sm-3">
			<jsp:include page="sidebar.jsp" />
		</div>

		<div class="col-lg-10 col-sm-9">
			<div class="row">
				<div class="col-sm-12">
					<div class="dialog dialog-success">
						<h4>我的签退</h4>
						<div class="row">
							<form role="form" action="<c:url value="/home/signout.do"/>" method="get">
								<div class="form-group col-sm-6 col-md-4">
									<label class="control-label">开始日期</label>
									<div class="input-group">
										<span class="input-group-btn">
											<button class="btn" type="button">
												<span class="fui-calendar"></span>
											</button>
										</span>
										<input type="text" class="form-control" id="datepicker-01" name="start_date" value="<fmt:formatDate value="${startDate}" pattern="yyyy-MM-dd"/>"/>
									</div>
								</div>
								<div class="form-group col-sm-6 col-md-4">
									<label class="control-label">结束日期</label>
									<div class="input-group">
										<span class="input-group-btn">
											<button class="btn" type="button">
												<span class="fui-calendar"></span>
											</button>
										</span>
										<input type="text" class="form-control" id="datepicker-02" name="end_date" value="<fmt:formatDate value="${endDate}" pattern="yyyy-MM-dd"/>"/>
									</div>
								</div>
								<div class="form-group col-sm-6 col-md-4">
									<label class="control-label">　　　　</label>
									<div class="control-content">
										<button class="btn btn-primary btn-block" type="submit">查找</button>
									</div>
								</div>
							</form>
						</div>
					</div>
					<div class="dialog dialog-info">
						<div class="table-responsive">
							<table class="table table-hover table-deep text-left"
								style="margin-top: 20px;">
								<thead>
									<th>日期</th>
									<th>签退</th>
									<th></th>
								</thead>
								<tbody>
									<c:forEach items= "${attendList}" var="attend">
									  <tr class="<c:if test="${attend.outTime < outTime}">danger</c:if>">
											<td><fmt:formatDate value="${attend.date}" pattern="yyyy-MM-dd"/></td>
											<td><fmt:formatDate value="${attend.outTime}" pattern="HH:mm:ss"/></td>
											<td>
											  <c:choose>  
												<c:when test="${attend.outTime < outTime}">
												  <span class="fui-cross-circle text-danger"></span>                         
												</c:when>  
												<c:otherwise>
												  <span class="fui-check-circle text-primary"></span>
												</c:otherwise>  
											  </c:choose>  	
											</td>
									  </tr>
									</c:forEach>
								</tbody>
							</table>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
</div>


<script>
  document.title = "个人中心-我的签退";
  $(function(){
	  initDatepicker($('#datepicker-01'));
	initDatepicker($('#datepicker-02'));
	function initDatepicker(datepickerSelector){
	   datepickerSelector.datepicker({
		showOtherMonths: true,
		selectOtherMonths: true,
		dateFormat: 'yy-mm-dd',
		yearRange: '-1:+1'
	  }).prev('.input-group-btn').on('click', function (e) {
		e && e.preventDefault();
		datepickerSelector.focus();
	  });
	  $.extend($.datepicker, { _checkOffset: function (inst,offset,isFixed) { return offset; } });

	  // Now let's align datepicker with the prepend button
	  datepickerSelector.datepicker('widget').css({ 'margin-left': -datepickerSelector.prev('.input-group-btn').find('.btn').outerWidth() + 3 });
	}

	// Focus state for append/prepend inputs
	$('.input-group').on('focus', '.form-control', function () {
	  $(this).closest('.input-group, .form-group').addClass('focus');
	}).on('blur', '.form-control', function () {
	  $(this).closest('.input-group, .form-group').removeClass('focus');
	});
  });
</script>
<jsp:include page="../footer.jsp" />
